<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="div1">
    <div id="d1">1</div>
    <div id="d2">2</div>
    <div id="d3">3</div>
    <div id="d4">4</div>
</div>

</body>
<script>
    let d3 = document.getElementById("d3");
    //获取父节点
    let parentElement = d3.parentElement;
    console.log(parentElement);
    //包含空格和换行，为Text
    //获取下一个兄弟节点
    let noded3n = d3.nextSibling;
    //获取上一个兄弟节点
    let noded3p = d3.previousSibling;
    //不包含空格换行，直接获取元素
    let nextElementSiblingd3n = d3.nextElementSibling;
    let nextElementSiblingd3p = d3.previousElementSibling;

    console.log(noded3n);
    console.log(noded3p);
    console.log(nextElementSiblingd3n);
    console.log(nextElementSiblingd3p);

    console.log("-------------------------------");
    //获取所有子节点
    let children = document.getElementById("div1").children;
    for (let child of children) {
        console.log(child)
    }

    console.log("--------------------------------");
    //获取第一个和最后一个
    let div1 = document.getElementById("div1");
    let f1 = div1.firstChild;
    let fe1 = div1.firstElementChild;
    let l1 = div1.lastChild;
    let le1 = div1.lastElementChild;
    console.log(f1);
    console.log(fe1);
    console.log(l1);
    console.log(le1);


</script>
</html>